<!-- 模块说明 -->
<template>
  <div>
    <div
      style="
        display: flex;
        align-items: center;
        margin: 50px;
        margin-bottom: 20px;
      "
    >
      <p style="font-size: 20px">年级：</p>
      <el-select v-model="value" class="m-2" placeholder="请选择" size="large">
        <el-option
          v-for="item in options"
          :key="item.id"
          @click="getId(item)"
          :label="item.grade"
          :value="item.grade"
        />
      </el-select>
      <p style="font-size: 20px; margin-left: 20px">学科：</p>
      <el-select v-model="value2" class="m-2" placeholder="请选择" size="large">
        <el-option
          v-for="item in options2"
          @click="gettId(item)"
          :key="item.id"
          :label="item.name"
          :value="item.name"
        />
      </el-select>
    </div>
    <div
      style="
        display: flex;
        align-items: center;
        margin: 50px;
        margin-top: 10px;
        margin-bottom: 20px;
      "
    >
      <p style="font-size: 20px; width: 63px">题干：</p>
      <el-input v-model="topic" @input="topicend" />
    </div>
    <div style="margin: 50px; margin-top: 10px; font-size: 20px">
      <p style="font-size: 20px; width: 63px; margin-bottom: 20px">选项：</p>
      <div
        v-for="item in config"
        :key="item.id"
        style="
          display: flex;
          align-items: center;
          padding-left: 60px;
          width: 1000px;
        "
      >
        {{ item.zimu }}:<el-input
          v-model="item.value"
          style="margin: 10px 40px 10px 20px"
          @change="add(item)"
        />
      </div>
    </div>
    <div
      style="
        display: flex;
        align-items: center;
        margin: 50px;
        margin-top: 10px;
        margin-bottom: 20px;
      "
    >
      <p style="font-size: 20px">标答：</p>
      <el-radio-group v-model="radio">
        <el-radio
          v-for="item in config"
          :key="item.id"
          :label="item.id"
          @change="getTopic(item)"
        >
          {{ item.zimu }}</el-radio
        >
      </el-radio-group>
    </div>
    <div
      style="
        display: flex;
        align-items: center;
        margin: 50px;
        margin-top: 10px;
        margin-bottom: 20px;
      "
    >
      <p style="font-size: 20px">分数：</p>
      <el-input-number
        v-model="num"
        :min="1"
        :max="30"
        @change="handleChange"
      />
    </div>
    <div
      style="
        display: flex;
        align-items: center;
        margin: 50px;
        margin-top: 10px;
        margin-bottom: 20px;
      "
    >
      <p style="font-size: 20px">难度：</p>
      <el-input-number
        v-model="num2"
        :min="1"
        :max="5"
        @change="handleChange2"
      />
    </div>
    <div
      style="
        display: flex;
        align-items: center;
        margin: 50px;
        margin-top: 10px;
        margin-bottom: 20px;
      "
    >
      <el-button @click="submit" type="primary">提交</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import {
  IQuestion,
  addQuestionList,
  editQuestionList,
} from "../../api/question";
import { getGradeList, getSubjectList } from "../../api/index";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
const route = useRoute();
const router = useRouter();
const options = ref<any[]>([]);
const options2 = ref<any[]>([]);
const store = useStore();
const radio = ref(null);
const num = ref(route.query.id ? store.state.topic.profile.score : 1);
const num2 = ref(route.query.id ? store.state.topic.profile.difficult : 1);
const value = ref("");
const value2 = ref("");
const topic = ref(route.query.id ? store.state.topic.profile.shortTitle : '');
const topic1 = ref(route.query.id ? store.state.topic.profile.item[0] : '');
const topic2 = ref(route.query.id ? store.state.topic.profile.item[1] : '');
const topic3 = ref(route.query.id ? store.state.topic.profile.item[2] : '');
const topic4 = ref(route.query.id ? store.state.topic.profile.item[3] : '');
const submitList = ref<IQuestion>({
  id: 0,
  questionType: 0,
  subjectId: 0,
  score: 0,
  correct: "",
  difficult: 0,
  shortTitle: "",
  item: [],
});
// A.B.C.D
const config = ref<any[]>([
  {
    id: 1,
    zimu: "A",
    value: topic1,
    isflag: true,
  },
  {
    id: 2,
    zimu: "B",
    value: topic2,
    isflag: true,
  },
  {
    id: 3,
    zimu: "C",
    value: topic3,
    isflag: true,
  },
  {
    id: 4,
    zimu: "D",
    value: topic4,
    isflag: true,
  },
]);
const getGrade = async () => {
  let res = await getGradeList();
  options.value = res.data;
  // console.log(res);
};
// 题干
const topicend = () => {
  submitList.value.shortTitle = topic.value;
};
// 年级
const getId = async (item: any) => {
  console.log(item.id);
  let res = await getSubjectList({ level: item.id });
  options2.value = res.data;
  value2.value = "";
};
// 学科
const gettId = (item: any) => {
  // console.log(item.xueid);

  submitList.value.subjectId = item.xueid;
};
// 选项
const add = (item: any) => {
  // console.log(item.value);
  submitList.value.item = [...submitList.value.item, item.value];
};
// 标答
const getTopic = (item: any) => {
  // console.log(item.value);
  submitList.value.correct = item.value;
};
// 分数
const handleChange = (value: number) => {
  // console.log(value);
  submitList.value.score = value;
};
// 难度
const handleChange2 = (value: number) => {
  // console.log(value);
  submitList.value.difficult = value;
};
// 提交
const submit = async () => {
  submitList.value.id = Date.now();
  submitList.value.questionType = 1;
  console.log(submitList.value);
  if (route.query.id !== undefined) {
    await editQuestionList(route.query.id, submitList.value);
  } else {
    await addQuestionList(submitList.value);
  }
  router.push("/topic");
};
onMounted(() => {
  getGrade();
});
</script>
<style lang="scss" scoped></style>
